<template>
    <div>
        <Card>
            {{remarkInput}}
            <Row class="form-row">
                <Form :model="filters" label-position="right" :label-width="90" inline ref="formInline">
                    <FormItem label="小区">
                        <div class="filters-input">
                            <el-select v-model="filters.housingId" placeholder="请选择小区" filterable no-data-text="暂无数据"
                                       @change="housechange">
                                <el-option v-for="item in houseList" :value="item.id" :key="item.id"
                                           :label="item.name"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="催收状态">
                        <div class="filters-input">
                            <el-select v-model="filters.collectionStatus" @change="loadData" placeholder="请选择催收状态"
                                       filterable>
                                <el-option value="-1" label="未催收"></el-option>
                                <el-option value="1" label="已催收"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="费用类型">
                        <div class="filters-input">
                            <el-select v-model="filters.costTypeId" @change="loadData" placeholder="请选择费用类型" filterable
                                       clearable
                                       no-data-text="暂无数据">
                                <el-option v-for="item in costType" :value="item.id" :key="item.id" :label="item.name">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="账期">
                        <div class="filters-input">
                            <el-select v-model="filters.accountPeriod" @change="loadData" placeholder="请选择账期" filterable
                                       clearable
                                       no-data-text="暂无数据">
                                <el-option value="" label="全部" aria-selected="true">全部</el-option>
                                <el-option v-for="item in accountPeriod" :value="item" :key="item" :label="item">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                </Form>
            </Row>

            <Row class="form-row">
                <el-dropdown>
                    <el-button type="primary">
                        首次催收<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="lyCollection(1)">发送微信通知</el-dropdown-item>
                        <el-dropdown-item @click.native="lyCollection(2)">发送海纳通知</el-dropdown-item>
                        <el-dropdown-item @click.native="lyCollection(3)">发送短信</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                &nbsp;
                <el-dropdown>
                    <el-button type="primary">
                        再次催收<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="again(1)">发送微信通知</el-dropdown-item>
                        <el-dropdown-item @click.native="again(2)">发送海纳通知</el-dropdown-item>
                        <el-dropdown-item @click.native="again(3)">发送短信</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </Row>

            <el-table stripe border v-loading="tableLoading" :data="tableData" ref="table" style="width: 100%"
                      @selection-change="handleSelectionChange">
                <template slot="empty">暂无数据</template>
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="住址">
                    <template slot-scope="scope">
                        {{scope.row.housingName}}/{{scope.row.groupName || " "}}/{{scope.row.building ||
                        ""}}/{{scope.row.unit||" "}}/{{scope.row.room}}
                    </template>
                </el-table-column>
                <el-table-column prop="costTypeName" label="费用类型"></el-table-column>
                <el-table-column prop="accountPeriod" label="账期"></el-table-column>
                <el-table-column prop="amount" label="应收金额"></el-table-column>
                <el-table-column label="付款状态">
                    <template slot-scope="scope">
                        <p v-if="scope.row.payStatus == 1">未付款</p>
                        <p v-if="scope.row.payStatus == 2">已付款</p>
                    </template>
                </el-table-column>
                <el-table-column prop="startDay" label="出账日期"></el-table-column>
                <el-table-column prop="endDay" label="缴费截止日期"></el-table-column>
                <el-table-column prop="collectionStatus" label="催收状态">
                    <template slot-scope="scope">
                        <p v-if="scope.row.collectionStatus == -1" style="color:red">未催收</p>
                        <p v-if="scope.row.collectionStatus == 1" style="color:green">已催收</p>
                    </template>
                </el-table-column>
                <el-table-column prop="collection" label="催收次数"></el-table-column>

            </el-table>
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  id="lyPage"
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>

        </Card>

    </div>
</template>


<script>
    //线上下载模板地址
    import baseURL from "_conf/url";
    import Treeselect from "@riophae/vue-treeselect";
    import Cookies from "js-cookie";
    import {TOKEN_KEY} from "@/libs/util";

    //线上上传账单地址
    const act = baseURL + "/api/bill/upload";

    export default {
        data() {
            return {
                // 总额
                remarkInput: "",
                //查询条件
                filters: {
                    collectionStatus: '-1',
                },
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                //备注
                popRemarks: false,
                modelRemarks: {},
                //小区列表
                houseList: [],
                payStatus: [],
                status: [],
                modalDelete_room: "",
                costType: [],
                accountPeriod: [],
                tableData: [],
                //表单提交状态
                modal: {},
                multipleSelection: [],
                tableLoading: false
            }
        },
        created: function () {
            this.gethouse();
        },
        methods: {
            //加载数据
            loadData: function () {
                if (this.tableLoading) return;
                this.tableLoading = true;
                let params = this.filters;
                params.pageNum = this.pageNum;
                params.pageSize = this.pageSize;

                //与后台交换数据
                this.postRequest("/api/collect/loadData", params).then(res => {
                    this.tableLoading = false;
                    if (res.code == 20000) {
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    } else {
                        this.tableData = [];
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            getCostType: function (value) {
                this.getRequest(
                    "/api/costType/getCostTypeByhousingId?housingId=" + value
                ).then(res => {
                    if (res.code == 20000) {
                        this.costType = res.data;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //加载小区
            gethouse: function () {
                this.postRequest("/api/housing/getHousingByLogin").then(res => {
                    this.houseList = res;
                    this.filters.housingId = res[0].id;
                    this.housechange(this.filters.housingId);
                    this.loadData();
                });
            },
            housechange: function (value) {
                this.getCostType(value);
                this.getAccountPeriod(value);
                this.loadData();
            },
            getCostType: function (value) {
                this.getRequest(
                    "/api/costType/getCostTypeByhousingId?housingId=" + value
                ).then(res => {
                    if (res.code == 20000) {
                        this.costType = res.data;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            getAccountPeriod: function (value) {
                this.getRequest(
                    "/api/collect/getAccountPeriod?housingId=" + value
                ).then(res => {
                    if (res.code == 20000) {
                        this.accountPeriod = res.data;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //查询
            handleQuery(name) {
                this.loadData(name);
            },
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },

            // 催收
            lyCollection: function (type) {
                let params = this.filters;
                params.type = type;
                if (params.housingId == '') {
                    this.$Message.error("请先选择小区!");
                } else {
                    //与后台交换数据
                    this.postRequest("/api/collect/collectionInfo", params).then(res => {
                        if (res.code == 20000) {
                            this.$Modal.confirm({
                                title: "提示",
                                content: "确定催收符合筛选条件账单:" + res.data.total + "条",
                                onOk: () => {
                                    if (res.data.type == 3) {
                                        if (res.data.smsSurplus < res.data.total) {
                                            this.$Message.error({
                                                content: "短信数量不足，请充值",
                                                duration: 5
                                            });
                                            this.$router.push({
                                                path: '/baseinfoConfig/recharge',
                                                query: {
                                                    smsSurplus: res.data.smsSurplus,
                                                    housingId: res.data.housingId,
                                                }
                                            })
                                        } else {
                                            this.postRequest("/api/collect/oneClickCollection", params).then(res => {
                                                this.tableLoading = false;
                                                if (res.code == 20000) {
                                                    this.$Message.success("催收成功!");
                                                    this.loadData(this.filters);
                                                } else {
                                                    this.$Message.error({
                                                        content: res.message,
                                                        duration: 5
                                                    });
                                                }
                                            });
                                        }
                                    } else {
                                        this.postRequest("/api/collect/oneClickCollection", params).then(res => {
                                            this.tableLoading = false;
                                            if (res.code == 20000) {
                                                this.$Message.success("催收成功!");
                                                this.loadData(this.filters);
                                            } else {
                                                this.$Message.error({
                                                    content: res.message,
                                                    duration: 5
                                                });
                                            }
                                        });
                                    }
                                },
                            });
                        } else {
                            this.$Message.error({
                                content: res.message,
                                duration: 5
                            });
                        }
                    });
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            again: function (type) {
                const selectList = [];
                const selectHousingList = [];
                this.multipleSelection.forEach(row => {
                    selectList.push(row.id);
                    selectHousingList.push(row.housingId);
                });
                this.wwkSelectList = selectList;
                if (this.wwkSelectList.length == "0") {
                    this.$message.error("请先选择催收账单");
                } else {
                    let params = {};
                    params.housingIds = selectHousingList;
                    params.type = type;
                    //校验选择用户小区是否有剩余短信条数
                    this.postRequest("/api/collect/againCollectionCheck", params).then(res => {
                        if (res.code == 20000) {
                            params.ids = selectList;
                            this.postRequest("/api/collect/againCollection", params).then(res => {
                                if (res.code == 20000) {
                                    this.$Message.success("催收成功!");
                                    this.loadData(this.filters);
                                } else {
                                    this.$Message.error({
                                        content: res.message,
                                        duration: 5
                                    });
                                }
                            });
                        } else {
                            this.$Message.error({
                                content: "短信数量不足，请充值",
                                duration: 5
                            });
                            this.$router.push({
                                path: '/baseinfoConfig/recharge',
                                query: {
                                    smsSurplus: res.data.smsSurplus,
                                    housingId: res.data.housingId,
                                }
                            })
                        }
                    });
                }
            },

        }
    };
</script>

<style lang="less">
    #lyPage {
        display: inline-block;
    }

    .billBox {
        .bill-item {
            width: 100%;
            line-height: 30px;
            span {
                padding-right: 20px;
            }
        }
    }
</style>
